<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>



<script src="../js/vue.js"></script>
<div id="app">
  <!--1 .lazy修饰符====>失去焦点或者按确认键时绑定-->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>

<!--2 .number修饰符=====》输入的值都是数字-->
  <input type="number" v-model="age">
  <h2>{{typeof age}}</h2>


  <!--3  .trim  去除前后空格-->
  <input type="text" v-model.trim="name">
  <h2>{{message}}</h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "第一次，系统的学VUE",
      age:19,
      name:''
    }
  })
</script>
</body>
</html>